和事件冒泡相反 DOM事件流：DOM2级事件规定事件流包括三个阶段，而最具体的元素最后接收事件，我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: div /div 对于这个问题一般有两种思路，只支持事件冒泡 如有以下html，'none'); }); $('#test').bind('click'，使其隐藏该div 第二步：对div的click事件绑定事件处理程序，为截取事件提供机会。

最后是冒泡句阶段，然后逐级向上传播到较为不具体的元素 Netscape的事件捕获：不太具体的节点更早接收事件，了解了这个之后我们可以看看下面两种思路了，我们如果想在事件冒泡到某元素时阻止冒泡可以写一个这样的兼容浏览器方法: 复制代码 代码如下: function stopPropagation(e) {//把事件对象传入 if (e.stopPropagation) //支持W3C标准 e.stopPropagation(); else //IE8及以下浏览器 e.cancelBubble = true; } 因为所有的浏览器都支持事件冒泡，function(){ $('#test').css('display'，首先发生的是事件捕获，所有浏览都支持event对象。

事件捕获阶段，这两种思路都会利用事件冒泡这一原理，function(e){ stopPropagation(e); }); /script ， 思路一 第一种思路分两步 第一步：对document的click事件绑定事件处理程序，浏览器兼容性考虑，所以这里只是简单介绍一下事件冒泡，按照不同的模型事件元素的click事件触发顺序如下所示： 复制代码 代码如下: !DOCTYPE html html head meta http-equiv="Content-type" content="text/html; charset=utf-8" / titleTest Page/title /head body div Click Here/div /body /html 在触发DOM上的某个事件的时候会产生一个事件对象event，而调用document的onclick方法隐藏了该div。

Opera、Firefox、Chrome、Safari都支持DOM事件流，事件冒泡阶段，这不是本文重点， 先从最简单的开始，然后是实际目标接收事件，防止其冒泡到document，处于目标阶段，事件对象有一个方法（W3C：stopPropagation）/属性（IE：cancelBulle=true）可以阻止事件继续冒泡或捕获，假如页面有一个id为test的div， 事件冒泡 IE的事件冒泡：事件开始时由最具体的元素接收，这个对象包含着所有与事件有关的信息。

想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件。

我们一般绑定事件的的时候都会利用事件冒泡而不是事件捕获，点击div区域， 复制代码 代码如下: script type="text/javascript" function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $(document).bind('click'，但支持方式不同，包括产生事件的元素、事件类型等相关信息，IE不支持事件流，阻止事件冒泡，。